<template>
  <div class="tabs">
    <el-scrollbar ref="scrollbar">
      <div class="scrollbar">
        <el-dropdown
          ref="dropdown1"
          trigger="contextmenu"
          v-for="(item, index) in dynamicTag"
          :key="item.name"
          @command="handleClick"
          @contextmenu="changDropdown"
        >
          <el-tag
            class="mx-1"
            :closable="item.name == 'home' ? false : true"
            @close="closeTag(item.name)"
            :effect="$route.name == item.name ? 'dark' : 'plain'"
            :class="$route.name == item.name ? 'is-ative' : ''"
            @click="tabRouter(item.name)"
          >
            <el-icon class="active_icon" v-if="$route.name == item.name" size="small">
              <location-filled />
            </el-icon>
            {{ item.meta.title }}
          </el-tag>
          <!-- 下拉框 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                :icon="RefreshRight"
                :command="{ code: 1, path: $route.path, index }"
              >刷新</el-dropdown-item>
              <el-dropdown-item
                :icon="Close"
                :command="{ code: 2, path: $route.path, index }"
                :disabled="index == dynamicTag.length - 1"
              >关闭右侧标签</el-dropdown-item>
              <el-dropdown-item
                :icon="CircleClose"
                :command="{ code: 3, path: $route.path, index }"
              >全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import {
  Fold,
  LocationFilled,
  ArrowDown,
  RefreshRight,
  Close,
  CircleClose,
} from "@element-plus/icons-vue";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    Fold,
    LocationFilled,
    ArrowDown,
    RefreshRight,
    Close,
    CircleClose,
  },
  computed: {
    ...mapGetters(["dynamicTag"]),
  },
  methods: {
    ...mapActions(["addTag", "closeTag", "tabRouter","refresh","deleteRight","deletAll"]),
    // 新增标签
    addTags(route) {
      this.addTag(route);
    },
    // 删除标签页
    closeTags(index) {
      this.closeTag(index);
    },
    // 点击跳转
    tabRouters(tag) {
      this.tabRouter(tag);
    },
    handleClick(e) {
      switch (e.code) {
        case 1:
          this.$nextTick(() => {
            this.refresh(e);
          });
          break;
        case 2:
          this.deleteRight(e)
          break;
        case 3:
          this.deletAll()
          break;
        default:
          break;
      }
    },
    // 右击事件
    changDropdown() {
      document.body.click();
    },
  },
  //监听
  watch: {
    $route(route) {
      this.addTags(route);
    },
  },
  // // 挂载后
  mounted() {
    this.addTags(this.$route);
    this.$nextTick(() => {
      if (!this.$refs) {
        this.$refs.scrollbar.update();
      }
    });
  },
  setup() {
    return {
      Fold,
      LocationFilled,
      ArrowDown,
      RefreshRight,
      Close,
      CircleClose,
    };
  },
};
</script>

<style scoped lang="less">
.tabs {
  width: 100%;
  height: 40px;
  line-height: 34px;
  border-top: 1px solid #ebedf0;
  display: flex;
  align-items: center;
}
.scrollbar {
  display: flex;
  padding: 5px 20px;
}
.el-tag {
  margin-right: 5px;
  height: 28px;
  background-color: #fff;
  border-color: #c8c9cc;
  color: #606266;
  border-radius: 0px;
  & /deep/ .el-tag__close {
    color: #9ea0a6;
  }
}
.is-ative {
  background-color: #409eff !important;
  --el-tag-text-color: white !important;
  color: white !important;
}
.active_icon {
  display: inline;
  vertical-align: middle;
  font-size: 14px;
}
</style>
